import * as React from 'react';
import ReactEcharts from 'echarts-for-react';

const LineEcharts = () => {
  const symbolSize = 20;
  const data = [
    [40, -10],
    [-30, -5],
    [-76.5, 20],
    [-63.5, 40],
    [-22.1, 50],
  ];
  const option = {
    title: {
      text: 'Try Dragging these Points',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      },
    },
    grid: {
      top: '8%',
      bottom: '12%',
    },
    xAxis: {
      min: -100,
      max: 70,
      type: 'value',
      axisLine: { onZero: false },
    },
    yAxis: {
      min: -30,
      max: 60,
      type: 'value',
      axisLine: { onZero: false },
    },
    dataZoom: [
      {
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'slider',
        yAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'inside',
        xAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'inside',
        yAxisIndex: 0,
        filterMode: 'none',
      },
    ],
    series: [
      {
        id: 'a',
        type: 'line',
        smooth: true,
        symbolSize: symbolSize,
        data: data,
      },
    ],
  };

  //   setTimeout(function () {
  // Add shadow circles (which is not visible) to enable drag.
  //   myChart.setOption({
  //     graphic: data.map(function (item, dataIndex) {
  //       return {
  //         type: "circle",
  //         position: myChart.convertToPixel("grid", item),
  //         shape: {
  //           cx: 0,
  //           cy: 0,
  //           r: symbolSize / 2,
  //         },
  //         // invisible: true,
  //         draggable: true,
  //         ondrag: function (dx, dy) {
  //           // console.log('.....vvvvv');
  //           onPointDragging(dataIndex, [this.x, this.y]);
  //         },
  //         onmousemove: function () {
  //           showTooltip(dataIndex);
  //         },
  //         onmouseout: function () {
  //           hideTooltip(dataIndex);
  //         },
  //         z: 100,
  //       };
  //     }),
  //   });
  // }, 0);

  // window.addEventListener("resize", updatePosition);

  // myChart.on("dataZoom", updatePosition);

  // function updatePosition() {
  //   myChart.setOption({
  //     graphic: data.map(function (item, dataIndex) {
  //       return {
  //         position: myChart.convertToPixel("grid", item),
  //       };
  //     }),
  //   });
  // }

  // function showTooltip(dataIndex) {
  //   myChart.dispatchAction({
  //     type: "showTip",
  //     seriesIndex: 0,
  //     dataIndex: dataIndex,
  //   });
  // }

  // function hideTooltip(dataIndex) {
  //   myChart.dispatchAction({
  //     type: "hideTip",
  //   });
  // }

  // function onPointDragging(dataIndex, pos) {
  //   // console.log(data[dataIndex])
  //   data[dataIndex][1] = myChart.convertFromPixel("grid", pos)[1];

  //   console.time("wwwwwwwwww");
  //   // Update data
  //   myChart.setOption({
  //     series: [
  //       {
  //         id: "a",
  //         data: data,
  //       },
  //     ],
  //   });

  //   setTimeout(() => {
  //     console.timeEnd("wwwwwwwwww");
  //   });
  // }

  // if(option){
  // myChart.setOption(option);
  // }
  return (
    <ReactEcharts
      width="100%"
      style={{ width: '100%' }}
      option={option}
      notMerge={true}
      lazyUpdate={true}
    />
  );
};
export default LineEcharts;
